<template>
  <footer class="footer">
    <div class="footer-links">
      <a href="#" class="link">关于我们</a>
      <span class="separator">|</span>
      <a href="#" class="link">版权声明</a>
      <span class="separator">|</span>
      <a href="#" class="link">广告合作</a>
      <span class="separator">|</span>
      <a href="#" class="link">联系我们</a>
    </div>
  </footer>
</template>

<script>
export default {
  name: 'FooterContext',
  components: {}
}
</script>

<style scoped>
.footer {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba(51, 51, 51, 0.7);
  height: 66px;
  width: 100%;
  margin-top: 30px;
}

.footer-links {
  display: flex;
  align-items: center;
}

.link {
  color: white;
  text-decoration: none;
  margin: 0 10px;
}

.link:hover {
  color: #ff4d4f;
  font-weight: bold;
}

.separator {
  color: white;
}
</style>